<template>
  <div class="echarts" style="display: flex">
    <div :style="{height:'100vh',width:'40%'}" ref="myEchart"></div>
    <div style="width:60%;height: 400px;">
      <el-card class="box-card" style="width: 100%;height: 300px;padding: 0 20px;">
        <div slot="header" class="clearfix">
          <b>全国疫情</b>
        </div>
        <div class="totalXQ">
          <p class="itemList">确诊：<span style="color: red;font-weight: bold;">{{chinaAll.confirm}}</span> 人</p>
          <p class="itemList"> 治愈：<span style="color: red;font-weight: bold;">{{chinaAll.heal}}</span> 人</p>
          <p class="itemList"> 死亡：<span style="color: red;font-weight: bold;">{{chinaAll.dead}}</span> 人</p>
          <p class="itemList"> 外部输入：<span style="color: red;font-weight: bold;">{{chinaAll.importedCase}}</span> 人</p>
          <p class="itemList"> 新确诊：<span style="color: red;font-weight: bold;">{{chinaAll.nowConfirm}}</span> 人</p>
          <p class="itemList"> 新严重患者：<span style="color: red;font-weight: bold;">{{chinaAll.nowSevere}}</span> 人</p>
          <p class="itemList"> 疑似病例：<span style="color: red;font-weight: bold;">{{chinaAll.suspect}}</span> 人</p>
        </div>
      </el-card>
      <div style="height:300px;width:800px" id="myChart2"></div>
    </div>
  </div>
</template>
<script>
  import echarts from "echarts";
  import jsonp from "jsonp";
  import 'echarts/map/js/china.js' // 引入中国地图数据
  export default {
    name: "echarts",
    props: ["userJson"],
    data() {
      return {
        chart: null,
        chinaAll: {}
      };
    },
    mounted() {
      this.chinaConfigure();
      this.txT()
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      chinaConfigure() {
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
        jsonp('https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', (err, res) => {
          if (err) {
            console.error(err.message);
          } else {
            let data = JSON.parse(res.data)
            this.chinaAll = data.chinaTotal
            console.log("所有结果：----->", data);
            let dataMix = data.areaTree[0].children
            let resultDataConfirm = []
            let resultDataDead = []
            dataMix.forEach(item => {
              //确诊人数
              resultDataConfirm.push({name: item.name, value: item.total.confirm});
              resultDataDead.push({name: item.name, value: item.total.dead});
            })
            //地图
            let options = { // 进行相关配置
              title: {
                text: `中国各地区疫情图`,
                subtext: `更新时间：${data.lastUpdateTime}`,
                left: 'center'
              },
              backgroundColor: "#fff",
              tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>确诊人数：{c} (人)'
              }, // 鼠标移到图里面的浮动提示框
              toolbox: {
                show: true,
                feature: {
                  saveAsImage:{
                    type:'png',
                    name:'中国各地区疫情图',
                  },
                  restore:{
                    show :"true",
                    title:'还原'
                  },
                  dataView:{
                    show:true
                  }
                }
              },
              dataRange: {
                show: false,
                min: 0,
                max: 1000,
                text: ['High', 'Low'],
                realtime: true,
                calculable: true,
                color: ['orangered', 'yellow', 'lightskyblue']
              },
              geo: { // 这个是重点配置区
                map: 'china', // 表示中国地图
                roam: true,
                label: {
                  normal: {
                    show: true, // 是否显示对应地名
                    textStyle: {
                      color: 'rgba(0,0,0,0.4)'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                  },
                  emphasis: {
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              },
              series: [
                {
                  type: 'scatter',
                  coordinateSystem: 'geo' // 对应上方配置
                },
                {
                  name: '确诊人数（人）', // 浮动框的标题
                  type: 'map',
                  geoIndex: 0,
                  data: resultDataConfirm
                }
              ]
            }
            myChart.setOption(options)
          }
        })
        window.onresize = myChart.resize;
      },
      txT() {
        let myChart2 = echarts.init(document.getElementById('myChart2'));
        //条形图
        jsonp('https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5', (err, res) => {
          if (err) {
            console.error(err.message);
          } else {
            let data = JSON.parse(res.data)
            let allObj = data.chinaTotal
            let allArr = []
            for (const key in allObj) {
              allArr.push(allObj[key]);
            }
            console.log(allArr);
            let options2 = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              toolbox: {
                left: 0,
                feature: {
                  magicType: {
                    show:true,
                    type: ['bar', 'line']
                  }
                },
              },
              xAxis: {
                type: 'category',
                data: ['确诊', '治愈', '死亡', '新确诊', '疑似', '新高危', '输入病例', '未感染'],
                axisTick: {
                  alignWithLabel: true
                }
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: allArr,
                  barWidth: '60%',
                  type: 'bar'
                }
              ]
            };
            myChart2.setOption(options2)
          }
        })
      }
    }
  }
</script>
<style>
  .totalXQ > .itemList {
    margin: 10px 0;
  }
</style>